<template>
    <div class="flex min-h-screen w-screen">
        <!-- 右侧登录表单 -->
        <div class="flex-1 flex flex-col justify-center px-4 sm:px-6 lg:px-20 xl:px-24">
            <div class="mx-auto w-full max-w-sm lg:w-[580px]">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-900">账户登录</h2>
                    <p class="mt-2 text-sm text-gray-600">
                        还没有账户？
                        <router-link to="/register" class="font-medium text-indigo-600 hover:text-indigo-500">
                            立即注册
                        </router-link>
                    </p>
                </div>

                <div class="bg-white py-8 px-4 shadow-sm rounded-lg sm:px-10">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" class="space-y-6">
                        <el-form-item label="用户名" prop="userName">
                            <el-input v-model="form.userName" placeholder="请输入用户名" class="!h-[40px]" />
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                            <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password
                                class="!h-[40px]" />
                        </el-form-item>

                        <div class="flex items-center justify-between">
                            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                            <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">
                                忘记密码？
                            </a>
                        </div>

                        <div class="pt-2">
                            <el-button type="primary" @click="onSubmit" class="w-full !h-[40px] text-base">
                                登 录
                            </el-button>
                        </div>

                        <!-- 第三方登录 -->
                        <div class="mt-6">
                            <div class="relative">
                                <div class="absolute inset-0 flex items-center">
                                    <div class="w-full border-t border-gray-300"></div>
                                </div>
                                <div class="relative flex justify-center text-sm">
                                    <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                                </div>
                            </div>

                            <div class="mt-6 grid grid-cols-3 gap-3">
                                <a href="#"
                                    class="flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                    <i class="fab fa-weixin text-xl text-green-500"></i>
                                </a>
                                <a href="#"
                                    class="flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                    <i class="fab fa-qq text-xl text-blue-500"></i>
                                </a>
                                <a href="#"
                                    class="flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                    <i class="fab fa-weibo text-xl text-red-500"></i>
                                </a>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { loginApi } from '@/api/login'

const router = useRouter()
const formRef = ref<FormInstance>()
const rememberMe = ref(false)

const form = reactive({
    userName: '',
    password: ''
})

const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})

const onSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid) => {
        if (valid) {
            const res = await loginApi(form)
            if (res.code === 200 || res.code === 201) {
                ElMessage.success('登录成功！')
                router.push('/')
            } else {
                ElMessage.error(res.message)
            }
        } else {
            console.log('error submit!')
        }
    })
}
</script>

<style scoped>
:deep(.el-form-item__label) {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

:deep(.el-input__wrapper) {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

:deep(.el-input__wrapper:hover) {
    border-color: #6366f1;
}

:deep(.el-button--primary) {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

:deep(.el-button--primary:hover) {
    background-color: #4338ca;
    border-color: #4338ca;
}

:deep(.el-checkbox__label) {
    font-size: 0.875rem;
    color: #374151;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #4f46e5;
    border-color: #4f46e5;
}
</style>